<template>
  <div class="h-full">
    <fs-crud ref="crudRef" v-bind="crudBinding" @selection-change="handleSelectChange">
      <template v-if="title" #header-top>
        <div class="text-center text-xl font-bold pr-20">管理《{{ title }}》的剧集</div>
      </template>
    </fs-crud>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { dict, useFs } from '@fast-crud/fast-crud';
import { useRemoteSearch } from '@/hooks';
import createCrudOptions from './crud';
const title = ref('');
const router = useRouter();
const route = useRoute();
const series = ref('');
const selectedRowKeys = ref([]);
const apiPrefix = '/episode';
const { fetchUrl, searchState, addOption } = useRemoteSearch(`${apiPrefix}/dict`);
const context: any = {
  series,
  router,
  apiPrefix,
  selectedRowKeys,
  columns: {
    // _id: {
    //   type: 'selection'
    // },
    title: {
      title: '标题',
      type: 'text',
      search: { show: true },
      column: {
        width: 250,
        fixed: 'left',
        component: {
          sortOrder: false,
          sorter: 'default'
        }
      }
    },
    episode: {
      title: '第几集',
      type: 'number',
      column: {
        sorter: 'custom',
        width: 100,
        component: {
          name: 'fs-values-format',
          color: 'info',
          labelFormatter: (value: any) => {
            return `第${value.value}集`;
          }
        }
      },
      form: {
        value: 1
      }
    },
    series: {
      title: '所属短剧',
      type: 'text',
      form: {
        // value: series,
        component: {
          name: 'fs-dict-select',
          // remote: true,
          filterable: true,
          placeholder: '请选择所属短剧',
          options: searchState.data,
          width: 300,
          onSearch(value: any) {
            fetchUrl(value);
          },
          loading: searchState.fetching
        }
        // rule: [{ required: true, message: '请选择所属短剧' }]
      },
      // type: 'dict-select',
      search: {
        show: true,
        col: {
          span: 6 // 表示每列占6/24宽度，一行4列
          // 为了自适应，你也可以配置 {xs:6,sm:4,md:3,lg:2,xl:1}
          // 或者直接配置 'auto'，流式排列
        }
      },
      column: {
        width: 300,
        show: false
      },
      valueBuilder: (scope: any) => {
        addOption({
          label: scope.row.seriesname,
          value: scope.row.series
        });
      }
      // form: {
      //   value: series
      // },
      // dict: dict({
      //   url: `${apiPrefix}/dict`
      // })
    },
    seriesname: {
      title: '所属短剧',
      type: 'text',
      column: {
        // sorter: 'custom',
        width: 300
      },
      form: {
        show: false
      }
    },
    cover: {
      title: '封面',
      type: 'image-uploader',
      column: {
        width: 100
      },
      form: {
        show: false,
        component: {
          max: 1
        }
      }
    },
    description: {
      title: '简介',
      type: 'textarea',
      column: {
        show: false
      }
    },
    vip: {
      title: '是否付费',
      type: 'dict-switch',
      column: {
        width: 100
      },
      form: {
        value: true
      },
      dict: dict({
        data: [
          { value: true, label: '付费', color: 'success' },
          { value: false, label: '免费', color: 'warning' }
        ]
      })
    },
    source: {
      title: '来源',
      type: 'dict-radio',
      column: {
        show: false
      },
      form: {
        value: 0,
        valueChange(scope: any) {
          scope.form.video = [scope.form.remoteUrl];
        }
      },
      dict: dict({
        data: [
          { value: 0, label: '百度网盘' },
          { value: 1, label: '本地上传' },
          { value: 2, label: '网络地址' }
        ]
      })
    },
    remoteUrl: {
      title: '地址',
      type: 'text',
      column: {
        show: false
      },
      form: {
        valueChange(scope: any) {
          scope.form.video = [scope.form.remoteUrl];
        }
      }
    },
    video: {
      title: '视频',
      type: 'file-uploader',
      column: {
        show: false
      },
      form: {
        component: {
          max: 1
        },
        valueChange(scope: any) {
          scope.form.remoteUrl = scope.form.video[0];
        }
      }
    },
    pass: {
      title: '状态',
      type: 'dict-switch',
      column: {
        width: 100
      },
      form: {
        value: true
      },
      dict: dict({
        data: [
          { value: true, label: '上架', color: 'success' },
          { value: false, label: '下架', color: 'warning' }
        ]
      })
    },
    like: {
      title: '喜欢',
      type: 'number',
      column: {
        sorter: 'custom',
        width: 100
      },
      form: {
        show: false,
        value: 0
      }
    },
    views: {
      title: '观看',
      type: 'number',
      column: {
        sorter: 'custom',
        width: 100
      },
      form: {
        show: false,
        value: 0
      }
    },
    comments: {
      title: '评论',
      type: 'number',
      column: {
        sorter: 'custom',
        width: 100
      },
      form: {
        show: false,
        value: 0
      }
    }
  }
};

const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context
});

const handleSelectChange = value => {
  console.log(value);
};

onMounted(() => {
  console.log('crudBinding', crudBinding.value);

  crudBinding.value.pagination.page = 1;
  crudBinding.value.pagination.pageSize = 100;
  crudBinding.value.pagination.pageSizes.push(100);
  if (route.query.id) {
    console.log('onMounted...', route.query.id);
    series.value = route.query.id;
  }
  if (route.query.title) {
    title.value = route.query.title;
  }

  crudExpose.doRefresh();
});
</script>
